<template>
	<div class="system-dic-container layout-padding">
		<el-card shadow="hover" class="layout-padding-auto">
			<div class="system-user-search mb15">
				<el-form :inline="true" :model="dataForm">
					<el-form-item>
						<el-select @change="filterChange" clearable filterable v-model="dataForm.region_id" placeholder="区域名称" style="width: 180px;">
							<el-option v-for="item in selectData.regionData" :key="item.id" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-select @change="filterChange" clearable filterable v-model="dataForm.road_id" placeholder="道路名称" style="width: 180px;">
							<el-option v-for="item in selectData.roadData" :key="item.id" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-select @change="filterChange" clearable filterable v-model="dataForm.intersection_id" placeholder="路口名称" style="width: 180px;">
							<el-option v-for="item in selectData.intersectionData" :key="item.id" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-select @change="filterChange" clearable filterable v-model="dataForm.location_id" placeholder="路段名称" style="width: 180px;">
							<el-option v-for="item in selectData.locationData" :key="item.id" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-select @change="filterChange" clearable  v-model="dataForm.pole_type" placeholder="杆位类型" style="width: 180px;">
							<el-option label="新建" :value="1"></el-option>
							<el-option label="利旧" :value="2"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item><el-input size="default" v-model="dataForm.name" placeholder="监控杆名称" style="max-width: 180px"> </el-input></el-form-item>
					<el-form-item><el-button size="default" type="primary" class="ml10" @click="onSearch">查询</el-button></el-form-item>
					<el-form-item v-if="getAuthClick('basic-monitor-pole-create')"><el-button size="default" type="success" class="ml10" @click="onOpenAddDic()">添加</el-button></el-form-item>
				</el-form>
			</div>
			<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%;height:60vh">
				<el-table-column prop="number" label="监控编号"  align="center" />
				<el-table-column align="center" prop="name" label="监控名称" show-overflow-tooltip></el-table-column>
				<el-table-column align="center" prop="type" label="监控杆类型" show-overflow-tooltip></el-table-column>
				<el-table-column align="center"  label="安装位置" show-overflow-tooltip>
					<template #default="scope">
						<div>{{ scope.row.region.name}}-{{ scope.row.road.name}}{{ !scope.row.intersection?'':"-"+scope.row.intersection.name }}/{{ !scope.row.location?'':scope.row.location.name }}</div>
					</template>
				</el-table-column>
				<el-table-column  align="center" label="安装方向" show-overflow-tooltip>
					<template #default="scope">
						<div>
							<div v-if="scope.row.fix_direction==1">东</div>
							<div v-if="scope.row.fix_direction==2">南</div>
							<div v-if="scope.row.fix_direction==3">西</div>
							<div v-if="scope.row.fix_direction==4">北</div>
							<div v-if="scope.row.fix_direction==0">-</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column align="center" prop="lng" label="经度" show-overflow-tooltip></el-table-column>
				<el-table-column align="center" prop="lat" label="维度" show-overflow-tooltip></el-table-column>
				<el-table-column align="center" prop="pole_type" label="杆位类型" show-overflow-tooltip>
					<template #default="scope">
						<div>
							<div>{{ scope.row.pole_type==1?'新建':"利旧" }}</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column align="center" prop="created_at" label="创建时间" show-overflow-tooltip></el-table-column>
				<el-table-column align="center" label="操作">
					<template #default="scope">
						<el-button v-if="showUpdataClick" size="small" text type="primary" @click="onOpenEditDic(scope.row)">修改</el-button>
						<el-button v-if="showDeleteClick" size="small" text type="danger" @click="onRowDel(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div style="display: flex; justify-content: flex-end;margin-right:30px;">
				
				<el-pagination
				 style="margin-top:20px;"
				  background layout="prev, pager, next" 
				  :current-page="dataForm.page"
				  :page-size="dataForm.limit"
				  @current-change="handleCurrentChange"
				  :total="total" />
			</div>
		</el-card>
		<DicDialog ref="dicDialogRef" @refresh="getTableList()" :tableData="tableData" :disabled="disabled" />
		<editDialog ref="editDialogRef" @refresh="getTableList()" :tableData="tableData" :disabled="disabled" />
	</div>
</template>

<script setup lang="ts" name="systemDic">
import { defineAsyncComponent, reactive, onMounted, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { dicApi } from '/@/api/system/dic/index';
import {useBasicApi} from "/@/api/system/menu/index"
import {userApi} from "/@/api/system/user/index"
import {useRoleApi} from "/@/api/system/role/index"
import {deptApi} from "/@/api/system/dept/index"

import {useUserInfo} from "/@/stores/userInfo"

	const userInfo = useUserInfo();
	const permissions=userInfo.userInfos.permissions
	// 判断是否存在组件userInfo.userInfos.permissions
	const getAuthClick=(set:string)=>{
		let sert=permissions.findIndex((item)=>
		item==set
	)
	
	return sert>=0?true:false
	}
	 const showUpdataClick=ref(getAuthClick('basic-monitor-pole-update'))
	 const showDeleteClick=ref(getAuthClick('basic-monitor-pole-delete'))

const BasicApi = useBasicApi()
const useApi = userApi()
const roleApi = useRoleApi()
const depApi = deptApi()
const diApi = dicApi()
const tableData = ref();
const disabled = ref<Boolean>(false)
// 引入组件
const DicDialog = defineAsyncComponent(() => import('/@/views/basic/monitor/dialog.vue'));
const editDialog = defineAsyncComponent(() => import('/@/views/basic/monitor/editDialog.vue'));
const total = ref(1)
// dx定义
const dataForm = ref({
	region_id:"",
	road_id:"",
	name:"",
	location_id:"",
	pole_type:"",
	intersection_id:"",
	page:1,
	limit:10,
	include: "region;road;intersection;location",
	search:""
})
const ruleForm = ref({
	number:"",
	name:"",
	type:null,
	fix_direction:null,
	lng:"",
	lat:"",
	pole_type:1,
	created_timer:null,
})
const filterChange = () =>{
		if(dataForm.value.region_id==undefined){
			dataForm.value.region_id=''
		}
		if(dataForm.value.location_id==undefined){
			dataForm.value.location_id=''
		}
		if(dataForm.value.road_id==undefined){
			dataForm.value.road_id=''
		}
		if(dataForm.value.intersection_id==undefined){
			dataForm.value.intersection_id=''
		}
		if(dataForm.value.pole_type==undefined){
			dataForm.value.pole_type=''
		}
}
const onSearch = (async ()=>{
		dataForm.value.search = `location_id:${dataForm.value.location_id};intersection_id:${dataForm.value.intersection_id};name:${dataForm.value.name}:like;region_id:${dataForm.value.region_id};road_id:${dataForm.value.road_id};pole_type:${dataForm.value.pole_type}`
		getTableList()	
				
})
const editDialogRef = ref()
const searchForm = ref({search:""})
const selectData = reactive({
	regionData:[],
	roadData:[],
	locationData:[],
	intersectionData:[]
})
const getSelectData = (async ()=>{
	searchForm.value.search = `status:1`
	let res = await BasicApi.BasicTableApi(searchForm.value);
	if(res.isSuccess){
		selectData.regionData = res.returnData
	}
	let intersectionRes = await useApi.userTableApi(searchForm.value);
	if(intersectionRes.isSuccess){
		selectData.intersectionData = intersectionRes.returnData
	}
	let roadRes = await roleApi.RoleTableApi(searchForm.value);
	if(roadRes.isSuccess){
		selectData.roadData = roadRes.returnData
	}
	let locationRes = await depApi.getDepList(searchForm.value);
	if(locationRes.isSuccess){
		selectData.locationData = locationRes.returnData
	}
})
const getTableList = (async ()=>{
	state.tableData.loading = true
	let res = await diApi.getDicList(dataForm.value)
	if(res.isSuccess){
		state.tableData.data = res.returnData.data
		state.tableData.loading = false
		total.value = res.returnData.total
		dataForm.value.page = res.returnData.current_page
	}
})

// 定义变量内容
const dicDialogRef = ref();
const state = reactive<SysDicState>({
	tableData: {
		data: [],
		total: 0,
		loading: false,
		param: {
			pageNum: 1,
			pageSize: 10,
		},
	},
});
const handleCurrentChange = (val:number)=>{
	dataForm.value.page = val
	getTableList()
}
// 打开新增字典弹窗
const onOpenAddDic = () => {
	disabled.value=false
	tableData.value=ruleForm.value
	dicDialogRef.value.openDialog();
};
// 打开修改字典弹窗
const onOpenEditDic = ( row: RowDicType) => {
	disabled.value=true
	tableData.value=row
	editDialogRef.value.openDialog();
};
// 删除
const onRowDel = (async (row:object)=>{
	ElMessageBox.confirm(`此操作将永久删除此数据，是否继续?`, '提示', {
	confirmButtonText: '确认',
	cancelButtonText: '取消',
	type: 'warning',
})
	.then(async ()=>{
		let res = await diApi.delDic({id:row.id});
		if(res.isSuccess){
			ElMessage.success('删除成功');
			getTableList()
		}else{
			ElMessage.error('删除失败')
		}
	})
})
// 页面加载时
onMounted(() => {
	getTableList()
	getSelectData()
});
</script>

 <style>
.el-input{
	height: 40px;
}
.el-button{
	height: 40px;
}


</style>
